<!---->
<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div class="content">
    <!-- 头部 -->
    <div class="main-title">
      <ul>
        <li>
          <div class="main-title-left main-title-noSelect">
            首页
          </div>
          <div class="main-title-right">
            /
          </div>
        </li>
        <li>
          <div class="main-title-left main-title-select">
            系统设置
          </div>
          <div class="main-title-right">
            <!-- / -->
          </div>
        </li>
      </ul>
    </div>
    <div class="content-center">
      <ul>
        <li :key="index" @click="systemClick(index)" v-for="(item,index) in systemLists">
          <img :src="item.name" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import { mapActions, mapState } from "vuex";
  export default {
    data() {
      return {
        listShow: false,
        systemLists: [
          {
            name: "/static/img/模版管理@3x.png",
            path: "template"
          },
          {
            name: "/static/img/账号管理@3x.png",
            path: "account"
          },
          {
            name: "/static/img/字典管理@3x.png",
            path: "dictionaries"
          }
        ]
      };
    },
    // 过滤
    filters: {},
    // 模块新建时
    created: function () {
      var self = this;
    },
    // 计算属性
    mounted() { },
    // 事件处理
    methods: {
      systemClick(index) {
        var self = this;
        var pathStr = self.systemLists[index].path;
        this.$router.push({
          path: "/home/" + pathStr
        });
      }
    },
    // 监视
    watch: {}
  };
</script>
<style scoped>
  .content {
    overflow: hidden;
    min-height: 350px;
  }

  .content-center li {
    width: 303px;
    cursor: pointer;
    height: 159px;
    margin-right: 23px;
    margin-left: 23px;
    margin-top: 15px;
  }

  .content-center li img {
    width: 100%;
    height: 100%;
  }

  .content-center ul {
    display: flex;
    flex-wrap: wrap;
  }

  .content {
    width: 100%;
    /* height: 100%; */
    overflow: hidden;
    background-color: rgba(240, 242, 245, 1) !important;
    min-height: 350px;
    display: flex;
    flex-direction: column;
  }

  .content-center {
    overflow: hidden;
    width: calc(100% - 48px);
    margin-left: 24px;
    background-color: rgba(240, 242, 245, 1);
    margin-top: 24px;
    border-radius: 3px;
    min-height: calc(100% - 78px - 24px);
    margin-bottom: 24px;
  }

  .main-title-noSelect {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
  }

  .main-title-select {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
  }

  .main-title-right {
    width: 23px;
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
  }

  .main-title ul {
    width: 100%;
    display: flex;
    height: 54px;
    margin-left: 34px;
  }

  .main-title ul li {
    display: flex;
  }

  .main-title {
    width: 100%;
    height: 54px;
    background-color: #fff;
    line-height: 54px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0px 3px 3px 0px #ccc;
  }
</style>